<template>
<div>
  <div class="container1" v-if="upload">
      <div style="margin-bottom:20px">用户中心</div>
      <div style=" height: 30px;  width: 100%;background: rgba(209, 211, 212, 0.541);">
      <div class="select-thing" v-for="(item,index) in menuTab " :key="index">
          <div class="menu-tab" :class="{'menu-tab1': item.current}"  @click="toggleMenu(item)"><div style="padding-top: 4px;">{{item.txt}}</div></div>
      </div>
      </div>
 
      <Personal v-if="model=='personal'" />
       <Upload v-if="model=='upload'" @upload="uploadfile"/>
  </div>
  <div v-else>
   <UploadFile   @uploadSuccessful="uploadfile"/>
  </div>
  </div>
</template>

<script>
import UploadFile from "./uploadfile.vue"
import Personal from "./person.vue"
import Upload from "./upload.vue"
export default {
  components:{
    Personal,
    Upload,
    UploadFile
  },
  data(){
      return{
        menuTab:[
         { txt: '个人资料', current: true, type: 'personal' },
        { txt: '我的上传', current: false, type: 'upload' }
        ],
        model:"personal",
        upload:true
      }
  },
  methods:{
    uploadfile(){

      this.upload=!this.upload;
    },
 toggleMenu(data){
       this.menuTab.forEach((elem, index) => {
          elem.current = false;
        });
        // 高光
        data.current = true;
        // 修改模块值
        this.model = data.type;
 
      }
  }
  
  
}
</script>

<style lang="scss" scoped>
.container1{
    width: 91% !important;
    margin: auto;
  
}
.select-thing{
    
float: left;

   
}
.menu-tab{
    width: 100px;
    height: 30px;
    font-weight: bold;
    text-align: center;
    
    font-size: 14px;
     cursor: pointer;
    }
.menu-tab:hover{
    color: rgb(141, 141, 235);
}
.menu-tab1{
    background: white;
   color: rgb(141, 141, 235);
}
</style>

